<template>
  <div id="oecd">
    <a-carousel :dots="false" autoplay>
      <div class="swiper">
        <img style="width:100%" src="../assets/img/two/titleimg.png" alt="">
        <div class="box">
          <img style="width:100%" src="../assets/img/two/img01.png" alt="">
          <div class="item1">
            <div class="text">留置人数</div>
            <div class="num">0
              <span>人</span>
            </div>
          </div>
          <div class="item2">
            <div class="text">处分人数</div>
            <div class="num">1
              <span>人</span>
            </div>
          </div>
          <div class="item3">
            <div class="text">检举人数</div>
            <div class="num">3
              <span>人</span>
            </div>
          </div>
          <div class="item4">
            <div class="text">立案人数</div>
            <div class="num">1
              <span>人</span>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper">
        <img style="width:100%" src="../assets/img/two/titleimg2.png" alt="" />
        <div class="tips">
          <span>违反中央八项规定</span>
          <span>腐败和作风问题</span>
          <span>自办案件</span>
          <span>职务犯罪案件</span>
          <span>扶贫领域腐败和作风问题</span>
        </div>
        <echart height="1.8rem" />
      </div>
    </a-carousel>
  </div>
</template>

<script>
import { post, get } from "@/utils/axios";
import echart from "@/components/echart/LineChart";

export default {
  name: "oecd",
  components: { echart },
  data() {
    return {
      timer: null
    };
  },
  created() {
    this.timer = setInterval(() => {}, 120000);
  },
  mounted() {},
  destroyed() {
    this.timer = null;
  },

  methods: {
    // getdayoecd(day) {
    //   //每天实时人口
    //   let timestamp = Date.parse(new Date(day)) / 1000;
    //   let signValue = md5("330112NK07piZ0x9WcLpKW" + timestamp);
    //   post("/v1/data/10000017491", {
    //     area_code: "330112",
    //     sign: signValue,
    //     timestamp: timestamp
    //   }).then(res => {
    //     this.peopleArray = res.data;
    //     var count = 0;
    //     this.peopleArray.forEach(item => {
    //       count += Number(item.num);
    //     });
    //     this.peopleDay.push(String(count));
    //   });
    // }
  }
};
</script>

<style lang="scss" scoped>
#oecd {
  width: 100%;
  padding-right: 0.6rem;
  // padding-bottom: 0.4rem;
  // border: 1px solid aqua;
  .box {
    margin: 0.3rem auto 0;
    width: 2.25rem;
    position: relative;
    .item1 {
      text-align: right;
      position: absolute;
      left: -0.8rem;
      top: 0;
    }
    .item2 {
      text-align: left;
      position: absolute;
      right: -0.7rem;
      top: 0;
    }
    .item3 {
      text-align: right;
      position: absolute;
      left: -0.8rem;
      bottom: -0.14rem;
    }
    .item4 {
      text-align: left;
      position: absolute;
      right: -0.8rem;
      bottom: -0.14rem;
    }
  }
  .tips {
    margin-top: .1rem;
    text-align: right;
  }
  .tips span {
    color: #fff;
    margin-right: 0.36rem;
    padding-left: 0.2rem;
    font-size: 0.12rem;
    line-height: 0.12rem;
    box-sizing: border-box;
    position: relative;
    &:after {
      content: "";
      display: blcok;
      width: 0.1rem;
      height: 0.07rem;
      position: absolute;
      left: 0.06rem;
      top: 0.05rem;
    }
    &:nth-of-type(1):after {
      background: linear-gradient(180deg, #04e9ef, #01383a);
    }
    &:nth-of-type(2):after {
      background: linear-gradient(180deg, $BL, #082546);
    }
    &:nth-of-type(3):after {
      background: linear-gradient(180deg, #10fd04, #054601);
    }
    &:nth-of-type(4):after {
      background: linear-gradient(180deg, #9ff4f6, #0a2f58);
    }
    &:nth-of-type(5):after {
      background: linear-gradient(180deg, #e337a2, #58113d 60%);
    }
  }
}
</style>
